<template>
  <view>
    <!-- <navBar /> -->
    <!-- 商品列表渲染 -->
    <view class="goods-list">
         <u-swipe-action>
        <u-swipe-action-item
          :options="options"
          @click="swipeItemClick"
          v-for="item in cartList"
          :key="item.goods_id"
          :name="item.goods_id                    "
        >
      <view class="cart-item">
        <!-- radio 小程序组件库自带的 -->
        <radio @click="changeSelected(item.goods_id)" :checked="item.goods_select" color="#EB4450" />
        <view class="cart-count">
          <u-number-box @change="changeGoodCount" :value="item.goods_count" @overlimit="overLimit(item.goods_id,$event)" :name="item.goods_id" />
        </view>
        <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
        <navigator
          class="goods-item"
          hover-class="none"
          :url="`/pages/goods-detail/index?goods_id=${item.goods_id}`"
        >
          <!-- 商品图片 -->
          <image
            class="goods-image"
            :src="item.goods_small_logo"
            mode="aspectFit"
          />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
       </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio class="select-radio" :checked="isAllselected" color="#EB4450" @click="changeAllselected">
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ selectedCartListPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @click="goToPay">去结算({{ selectedCartListCount }})</view>
      </view>
    </view>
    <!-- 空状态 -->
    <u-empty
        mode="car"
        icon="http://cdn.uviewui.com/uview/empty/car.png"
        v-if="!cartList.length"
    >
    <navigator
        url="/pages/category/index"
        open-type="switchTab"
        hover-class="none"
    >
        <button type="primary" style="margin-top:40rpx">去逛逛吧~</button>
    </navigator>
    </u-empty>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    name: 'HeimaUgoIndex',

    data() {
        return {
            options:[{text:'删除',style:{ backgroundColor:"#f56c6c" } }]
        };
    },
    onLoad(){
        console.log(this.$store);
    },
    computed:{
        ...mapState({
            cartList:state => JSON.parse(JSON.stringify(state.cartList))
        }),
        ...mapGetters(['isAllselected','selectedCartListCount','selectedCartListPrice'])
    },
    methods:{
        //删除商品的函数
        deleteGood(goods_id){
            //获取vuex中的数据
            // const cartList = this.cartList
            //根据传入的ID获取当前项的下标
            const index = this.cartList.findIndex(item => item.goods_id === goods_id)
            //根据下标删除当前项
            this.cartList.splice(index,1)
            //更新vuex中的数据
            this.$store.commit('changeCartList',this.cartList)
        },
        //滑动触发的函数
        swipeItemClick({name}){
            this.deleteGood(name)
        },
        //当商品减至下限触发的函数
      async overLimit(goods_id,type){
           const [ error,res ] = await uni.showModal({
                title:'提示',
                content:"确认删除吗？"
            })
            if(!error){
                if(res.confirm){
                 this.deleteGood(goods_id)
                }
            }
        },
        //全选框的点击事件
        changeAllselected(){
           const cartList = this.cartList
           const isAllselected = this.isAllselected
           //根据全选框的状态修改每一个商品的选中状态
           cartList.forEach(item =>item.goods_select = !isAllselected);
           //更新vuex中的数据
           this.$store.commit('changeCartList',cartList)
        },
        //更改商品选中状态的函数
        changeSelected(id){
            //拿到vuex中商品的信息
            const cartList = this.cartList
            //通过传入的id找到当前点击商品的下标
            const index = cartList.findIndex(item=>item.goods_id === id)
            //通过下标修改商品的选中状态
            cartList[index].goods_select = !cartList[index].goods_select
            //调用vuex的mutations中的函数更改商品的信息
            this.$store.commit('changeCartList',cartList)
        },
        //更改商品选中数量的函数
        changeGoodCount({value,name}){
        //拿到vuex中商品的信息
        const cartList = this.cartList
        //通过传入的id找到当前点击商品的下标
        const index = cartList.findIndex(item => item.goods_id === name)
        //通过下标修改商品的选中数量
        cartList[index].goods_count = value
        //调用vuex的mutations中的函数更改商品的信息
        this.$store.commit('changeCartList',cartList)
        },
        //去结算的函数
        goToPay(){
          if(this.selectedCartListCount){
            uni.navigateTo({
              url:'/pages/pay/index'
            })
          }else{
            uni.showToast({
              title:'请至少选择一件商品~',
              icon:'none'
            })
          }
        }
    }
};
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>